<script setup>
import { computed, ref } from 'vue'
import { onLaunch, onShow, onLoad } from '@dcloudio/uni-app'
//引入API
import { getCategorytAPI } from '@/api/category'
//引入子组件
import NavVue from './components/Nav.vue'
import CategoryPanel from './components/CategoryPanel.vue'

//请求数据初始化页面
const categoryList = ref([])
const currentIndex = ref(0) // 当前选中的下标
const currentCategory = computed(() => {
  return categoryList.value[currentIndex.value]?.children ?? []
})
const getCategoryData = async () => {
  const res = await getCategorytAPI()
  categoryList.value = res.result
}
onLoad(async (options) => {
  await getCategoryData()
})
const handleItemClick = (index) => {
  currentIndex.value = index
}
</script>

<template>
  <view>
    <input class="uni-input" focus placeholder="女靴子" />
  </view>
  <view class="container">
    <NavVue :categoryList="categoryList" @itemClick="handleItemClick" />
    <CategoryPanel :currentCategory="currentCategory" />
  </view>
</template>

<style lang="scss">
.container {
  display: flex;
}
</style>
